<template>
    <el-form-item label="树型数据">
        <div class="el-table-defaultValue-editor">
            <el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="visible=true">编辑数据</el-button>

            <div class="bind" @click="dVisible=true" :class="{'bindData':optionModels.dataSource.length>0}">
                <svg-icon icon-class="code"/>
            </div>
        </div>


        <el-dialog :visible.sync="visible" title="编辑数据" :append-to-body="true">
            <code-editor :mode="'json'" :readonly="false" v-model="code"></code-editor>

            <div slot="footer">
                <el-button size="small" type="primary" @click="save">确定</el-button>
                <el-button size="small" @click="visible=false">取消</el-button>
            </div>
        </el-dialog>

        <select-model-data :selectedWidget="selectedWidget"
                           :visible.sync="dVisible"
                           :designer="designer">
        </select-model-data>
    </el-form-item>
</template>

<script>
import CodeEditor from "@/components/code-editor/index.vue";
import SvgIcon from "@/components/svg-icon/index.vue";
import SelectModelData from "@/components/form-designer/config-common/select-model-data/select-model-data.vue";

export default {
    name: "tree-defaultValue-editor",
    components: {SelectModelData, SvgIcon, CodeEditor},
    props: {
        designer: Object,
        selectedWidget: Object,
        optionModel: Object,
    },
    data() {
        return {
            visible: false,
            code: "",

            dVisible: false,
        }
    },
    computed: {
        optionModels() {
            return this.selectedWidget.options
        }
    },
    methods: {
        save() {
            this.optionModels.defaultValue = this.code ? JSON.parse(this.code) : [];
            this.emitDefaultValueChange()
            this.visible = false;
        },
        emitDefaultValueChange() {
            if (!!this.designer && !!this.designer.formWidget) {
                let fieldWidget = this.designer.formWidget.getWidgetRef(this.selectedWidget.options.name)
                if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
                    fieldWidget.refreshDefaultValue()
                }
            }
        },
    },
    mounted() {
        this.code = JSON.stringify(this.deepCopy(this.optionModels.defaultValue), null, '  ')
    }
}
</script>

<style lang="scss" scoped>
.el-table-defaultValue-editor {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;

  > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .bind {
    cursor: pointer;
  }

  .bindData {
    background: $--color-primary;
    color: white;
      border-radius: 4px;
  }
}
</style>
